<template>
  <!-- 首页-->
  <div class="appcontainer">
    <!-- 大图 -->
    <div class="bigimg">
      <div class="inbigimg">
        <div class="englishname">
          HIREM-DB
        </div>
        <div class="tips" v-if="language == 'zh'">专注于四高慢性病的综合数据集成平台</div>
        <div class="tips" v-else>A Comprehensive Data Integration Platform Focused On The Four High Chronic Diseases
        </div>
        <div class="numlist">
          <div class="numitem" style="cursor: pointer;" v-for="(item,index) in numList" :key="index"
            @click="topage(item,index,'num')">
            <div class="count">
              {{cutMoneyFiter(item.cNum)}}
            </div>
            <div class="label">
              {{item.cTitle}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据库功能模块介绍 -->
    <div class="databasemodel">
      <div class="inmodels">
        <div class="databasetitle" v-if="language == 'zh'">
          数据库功能模块介绍
        </div>
        <div class="databasetitle" v-else>
          Introduction To Database Function Modules
        </div>
        <div class="databasecontent">
          {{database}}
        </div>
      </div>
    </div>
    <!-- 核心模块 -->
    <div class="coremodel">
      <div class="incoremodel">
        <div class="coretitle" v-if="language == 'zh'">
          核心模块
        </div>
        <div class="coretitle" v-else>
          Core Module
        </div>
        <div class="corelist">
          <div class="coreitem" v-for="(item,index) in coreList" :key="index"
            :style="{height:language == 'zh' ? '232px' : '363px'}" @click="topage(item,index,'core')">
            <div class="coreitemtitle">
              {{item.cTitle}}
            </div>
            <div class="coreitemcontent">
              {{item.cContent}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 实验室介绍 -->
    <div class="Laboratory">
      <div class="inLaboratory">
        <div class="inLaboratorytitle" v-if="language == 'zh'">
          实验室介绍
        </div>
        <div class="inLaboratorytitle" v-else>
          Laboratory Introduction
        </div>
        <div class="tooltips" v-if="Laboratory && Laboratory.cTitle">
          {{Laboratory.cTitle}}
        </div>
        <div class="cSubtitle" v-if="Laboratory && Laboratory.cSubtitle">
          {{Laboratory.cSubtitle}}
        </div>
        <div class="cContent" v-if="Laboratory && Laboratory.cContent" v-html="Laboratory.cContent"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: [],
    components: {},
    data() {
      return {
        numList: [],
        language: '',
        database: null,
        coreList: [],
        pageNum: 1,
        pageSize: 10,
        cState: 1,
        Laboratory: null
      };
    },
    created() {
      this.language = sessionStorage.getItem('language')
      window.addEventListener('setItem', this.languages);
    },
    methods: {
      // 监听session中language的变化
      languages(e) {
        console.log(e, 8888888888888)
        this.language = sessionStorage.getItem('language')
        this.getData()
      },
      // 获取数据
      async getData() {
        // 获取大图数据
        await this.axios
          .get('/system/content/list?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&cState=' + this.cState + '&cDataType=5&cLanguage=' + this.language).then(res => {
            console.log(res, 555555555)
            if (res.data.code == 200) {
              this.numList = res.data.rows
            }
          })
        // 获取数据库功能模块介绍
        await this.axios
          .get('/system/content/list?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&cState=' + this.cState + '&cDataType=1&cBusType=1-1&cLanguage=' + this.language).then(res => {
            if (res.data.code == 200) {
              if (res.data.rows && res.data.rows.length != 0) {
                this.database = res.data.rows[0].cContent
              }
            }
          })
        // 核心模块
        await this.axios
          .get('/system/content/list?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&cState=' + this.cState + '&cDataType=2&cLanguage=' + this.language).then(res => {
            if (res.data.code == 200) {
              this.coreList = res.data.rows
            }
          })
        // 实验室介绍
        await this.axios
          .get('/system/content/list?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize + '&cState=' + this.cState + '&cDataType=1&cBusType=1-2&cLanguage=' + this.language).then(res => {
            if (res.data.code == 200) {
              if (res.data.rows && res.data.rows.length != 0) {
                this.Laboratory = res.data.rows[0]
                this.Laboratory.cContent = this.Laboratory.cContent.replace(/\n/g, "<br> <div style='margin-bottom:20px'></div>")
              }
            }
          })
      },
      // 点击大图数字跳转
      topage(item, index, type) {
        if (type == 'num') {
          if (index == 0) {
            this.$router.push('/zlzsj')
          } else if (index == 1) {
            this.$router.push('/literature')
          }
        }else{
          if (index == 0) {
            this.$router.push('/zlzsj')
          } else if (index == 1) {
            this.$router.push('/cyjbswbzw')
          } else if(index == 2){
            this.$router.push('/literature')
          } else if(index == 3){
            
          }
        }
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      this.language = null
      window.removeEventListener('setItem', this.languages);
    },
  };
</script>
<!-- 声明语言，并且添加scoped -->
<style scoped>
  .appcontainer {
    width: 100%;
  }

  .bigimg {
    width: 100%;
    height: 520px;
    background-image: url('../../img/bigbg.png');
    background-size: 100% 100%;
    padding: 80px 0;
    box-sizing: border-box;
  }

  .inbigimg {
    width: 70%;
    height: 100%;
    margin: 0 auto;
  }

  .englishname {
    font-size: 74px;
    font-weight: 600;
    color: #0d48ba;
    margin-bottom: 26px;
  }

  .tips {
    font-size: 36px;
    color: #666666;
  }

  .numlist {
    margin-top: 80px;
    display: flex;
    align-items: center;
  }

  .numitem {
    padding: 30px;
    box-sizing: border-box;
    background-color: #e2edfa;
    border-radius: 10px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .count {
    font-size: 28px;
    color: #0d48ba;
    margin-bottom: 10px;
  }

  .label {
    font-size: 20px;
    color: #666;
  }

  .databasemodel {
    width: 100%;
    padding: 66px 0 46px 0;
    box-sizing: border-box;
  }

  .inmodels {
    width: 70%;
    margin: 0 auto;
  }

  .databasetitle {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
  }

  .databasecontent {
    font-size: 22px;
    line-height: 46px;
  }

  .coremodel {
    width: 100%;
    background-image: url('../../img/coreimg.png');
    background-size: 100% 100%;
    padding: 80px 0 40px 0;
    box-sizing: border-box;
  }

  .incoremodel {
    width: 70%;
    margin: 0 auto;
  }

  .coretitle {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
  }

  .corelist {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .coreitem {
    background-color: #fff;
    border-radius: 20px;
    width: 24%;
    padding: 38px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
  }

  .coreitemtitle {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 20px;
  }

  .coreitemcontent {
    line-height: 36px;
    font-size: 18px;
    color: #999999;
  }

  .Laboratory {
    width: 100%;
    padding: 74px 0;
    box-sizing: border-box;
    background-color: #fff;
  }

  .inLaboratory {
    width: 70%;
    margin: 0 auto;
  }

  .inLaboratorytitle {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 40px;
  }

  .tooltips {
    font-size: 28px;
    font-weight: 600;
    color: #747474;
    text-overflow: ellipsis;
  }

  .cSubtitle {
    font-size: 18px;
    margin-top: 22px;
    color: #999999;
  }

  .cContent {
    line-height: 34px;
    color: #5f5f78;
    font-size: 20px;
    margin-top: 30px;
  }
</style>